<template>
  <div class="page-header-index-wide">
    <div class="ds_top">
      <div class="ds_top_left">
        <p class="ds_title">统计信息</p>
        <a-row :gutter="24">
          <!-- 患者总数 -->
          <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px !important' }">
            <chart-card :loading="loading" title="患者总数" :num="loginfo.patientCountDiff">
              <div class="chart-card-contain">
                <img src="../../assets/w_ren-2.png" />
                <span class="total">{{ loginfo.patientCount || 0 }}</span>
                <span>人</span>
              </div>
            </chart-card>
          </a-col>
          <!-- 病程<5年患者 -->
          <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px !important' }">
            <chart-card :loading="loading" title="病程<5年患者" :num="loginfo.servingPatientCountDiff">
              <div class="chart-card-contain">
                <img src="../../assets/shouye-2.png" />
                <span class="total">{{ loginfo.servingPatientCount || 0 }}</span>
                <span>人</span>
              </div>
            </chart-card>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <!-- 联网血糖仪 -->
          <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px !important' }">
            <chart-card :loading="loading" title="联网血糖仪" :num="loginfo.gluDeviceCountDiff">
              <div class="chart-card-contain">
                <img src="../../assets/shebei-2.png" />
                <span class="total">{{ loginfo.gluDeviceCount || 0 }}</span>
                <span>人</span>
              </div>
            </chart-card>
          </a-col>
          <!-- 血糖测量总数 -->
          <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px !important' }">
            <chart-card :loading="loading" title="血糖测量总数" :num="loginfo.sugarCountDiff">
              <div class="chart-card-contain">
                <img src="../../assets/shui-2.png" />
                <span class="total">{{ loginfo.sugarCount || 0 }}</span>
                <span>次</span>
              </div>
            </chart-card>
          </a-col>
        </a-row>

        <p class="ds_title" style="margin-top: 20px;">统计图表</p>
        <div class="ds_card" v-if="statnothing == 1">
          <a-row :gutter="24">
            <!-- 糖尿病类型 -->
            <a-col :sm="48" :md="24" :xl="12" :style="{ marginBottom: '24px' }">
              <p class="ds_card_subtitle">
                <span></span>
                <span>糖尿病类型</span>
              </p>
              <pie :dataSource="DiaTypeData" />
            </a-col>
            <!-- 性别 -->
            <a-col :sm="48" :md="24" :xl="12" :style="{ marginBottom: '24px' }">
              <p class="ds_card_subtitle">
                <span></span>
                <span>性别</span>
              </p>
              <pie :dataSource="sexData"></pie>
            </a-col>
            <!-- 年龄 -->
            <a-col :sm="48" :md="24" :xl="12" :style="{ marginBottom: '24px' }">
              <p class="ds_card_subtitle">
                <span></span>
                <span>年龄</span>
              </p>
              <pie :dataSource="ageData"></pie>
            </a-col>
            <!-- 糖龄 -->
            <a-col :sm="48" :md="24" :xl="12" :style="{ marginBottom: '24px' }">
              <p class="ds_card_subtitle">
                <span></span>
                <span>糖龄</span>
              </p>
              <pie :dataSource="DiaAgeData"></pie>
            </a-col>
            <!-- 用药类型 -->
            <!-- <a-col :sm="48" :md="24" :xl="12" :style="{ marginBottom: '24px' }">
              <p class="ds_card_subtitle">
                <span></span>
                <span>用药类型</span>
              </p>
              <pie :dataSource="MedTypeData"></pie>
            </a-col> -->
            <!-- 血糖仪类型 -->
            <!-- <a-col :sm="48" :md="24" :xl="12" :style="{ marginBottom: '24px' }">
              <p class="ds_card_subtitle">
                <span></span>
                <span>血糖仪类型</span>
              </p>
              <pie :dataSource="MacTypeData"></pie>
            </a-col> -->
          </a-row>
        </div>
        <div class="ds_card" v-else>
          <a-empty :image-style="{ height: '250px' }">
            <img slot="image" src="~@/assets/report-empty.png" />
            <span slot="description">暂无数据</span>
          </a-empty>
        </div>
      </div>
      <div class="ds_top_right">
        <div class="" style="display: flex;justify-content: space-between;align-items: center;">
          <p class="ds_title">最新血糖测量情况</p>
          <a-button size="large" icon="redo" type="primary" @click="reload"> 刷新</a-button>
        </div>

        <div class="ds_card" style="margin-bottom: 24px;margin-top: 0;">
          <a-table
            :loading="loading"
            :columns="columns"
            :dataSource="patientdata"
            :pagination="false"
            style="margin-top: 10px"
          >
            <span slot="tags" slot-scope="tags">
              <a-tag :color="tags === '偏低' ? 'green' : tags === '正常' ? 'geekblue' : 'volcano'">
                {{ tags }}
              </a-tag>
            </span>
          </a-table>
        </div>

        <a-row :gutter="32" :style="{ marginTop: '20px' }">
          <!-- 今日测量 -->
          <a-col :sm="56" :md="48" :xl="24" :style="{ marginBottom: '20px' }">
            <div
              v-if="valueTypeData.length > 0"
              class="ds_card"
              style="margin-top: 0px;padding-top: 80px;height: 370px;"
            >
              <pie :dataSource="valueTypeData" />
            </div>
            <div v-else class="ds_card" style="margin-top: 0px;padding-top: 30px;height: 370px;">
              <a-empty :image-style="{ height: '250px' }">
                <img slot="image" src="~@/assets/report-empty.png" />
                <span slot="description">暂无数据</span>
              </a-empty>
            </div>
          </a-col>
          <a-col :sm="56" :md="24" :xl="12" :style="{ marginBottom: '24px' }">
            <chart-card
              :loading="loading"
              title="今日测量"
              :num="dynamicInfo.todayCountDifference"
              style="margin-top: 30px;"
            >
              <div class="chart-card-contain">
                <img src="../../assets/shuju-2.png" />
                <span class="total">{{ dynamicInfo.todayCount || 0 }}</span>
                <span>次</span>
              </div>
            </chart-card>
          </a-col>
          <a-col :sm="56" :md="24" :xl="12" :style="{ marginBottom: '24px' }">
            <chart-card
              :loading="loading"
              title="今日异常"
              :num="dynamicInfo.todayAbnormalCountDifference"
              style="margin-top: 30px;"
            >
              <div class="chart-card-contain">
                <img src="../../assets/yichang-2.png" />
                <span class="total">{{ dynamicInfo.todayAbnormalCount || 0 }}</span>
                <span>次</span>
              </div>
            </chart-card>
          </a-col>
        </a-row>

        <!-- <div class="ds_card" style="margin-top: 20px;">
          <p class="ds_card_subtitle">
            <span></span>
            <span>达标率</span>
          </p>
          <bar :dataSource="barData" />
        </div> -->
      </div>
    </div>

    <a-row>
      <!-- 打卡统计 -->
      <a-col :span="24">
        <div class="ds_card">
          <p class="ds_card_subtitle">
            <span></span>
            <span>打卡统计</span>
          </p>
          <!-- <line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid> -->
          <a-row v-if="statnothing == 1">
            <a-col :sm="48" :md="24" :xl="12">
              <a-tabs :active-key="activeGroupId" tabPosition="top" @change="handleChangeActiveGroupId">
                <a-tab-pane v-for="item in panes" :key="item.dataId" :tab="item.groupName">
                  <pie :dataSource="item.data" />
                </a-tab-pane>
              </a-tabs>
            </a-col>
            <a-col :sm="48" :md="24" :xl="12">
              <bar :dataSource="barCheckData" />
            </a-col>
          </a-row>
          <a-empty :image-style="{ height: '250px' }" v-else>
            <img slot="image" src="~@/assets/report-empty.png" />
            <span slot="description">暂无数据</span>
          </a-empty>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ChartCard from '@/components/DoctorChartCard'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import Bar from '@/components/chart/Bar'
import Pie from '@/components/chart/Pie'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'
import { getAction, postAction } from '@/api/manage'
const columns = [
  {
    title: '患者姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '测量时段',
    dataIndex: 'time',
    key: 'time'
  },
  {
    title: '血糖值',
    dataIndex: 'value',
    key: 'value'
  },
  {
    title: '血糖状况',
    dataIndex: 'tags',
    key: 'tags',
    scopedSlots: { customRender: 'tags' }
  }
]

const barData = [
  {
    x: '空腹血糖达标率',
    y: 85
  },
  {
    x: '糖化达标率',
    y: 91
  },
  {
    x: 'BMI达标率',
    y: 73
  },
  {
    x: '腰围达标率',
    y: 78
  }
]

export default {
  name: 'DoctorChart',
  components: {
    ATooltip,
    ACol,
    ChartCard,
    Bar,
    Pie,
    LineChartMultid,
    HeadInfo
  },
  data() {
    return {
      loading: false,
      center: null,
      barData,
      barCheckData: [],
      panes: [],
      columns,
      patientdata: [],
      dynamicInfo: {},
      loginfo: {
        patientCount: '',
        patientCountDiff: '',
        preDiabetesCount: '',
        preDiabetesCountDiff: '',
        diabetes2Count: '',
        diabetes2CountDiff: '',
        diabetes2Count: '',
        diabetes2CountDiff: ''
      },
      activeGroupId: 0,
      visitFields: [
        '空腹血糖',
        '早餐后血糖',
        '午餐前血糖',
        '午餐后血糖',
        '晚餐前血糖',
        '晚餐后血糖',
        '睡前血糖',
        '凌晨血糖'
      ],
      visitInfo: [
        {
          空腹血糖: 2,
          早餐后血糖: 4.1,
          午餐前血糖: 5.8,
          午餐后血糖: 9.8,
          晚餐前血糖: 8,
          晚餐后血糖: 10,
          睡前血糖: 7.1,
          凌晨血糖: 5.2,
          type: '03-03'
        },
        {
          空腹血糖: 2.3,
          早餐后血糖: 5.1,
          午餐前血糖: 5.3,
          午餐后血糖: 5.8,
          晚餐前血糖: 1.8,
          晚餐后血糖: 8.8,
          睡前血糖: 7.4,
          凌晨血糖: 4.2,
          type: '03-04'
        },
        {
          空腹血糖: 5,
          早餐后血糖: 6.1,
          午餐前血糖: 5.8,
          午餐后血糖: 7.8,
          晚餐前血糖: 3,
          晚餐后血糖: 12,
          睡前血糖: 7.1,
          凌晨血糖: 9.2,
          type: '03-06'
        },
        {
          空腹血糖: 4.3,
          早餐后血糖: 5.1,
          午餐前血糖: 6.3,
          午餐后血糖: 4.8,
          晚餐前血糖: 2.8,
          晚餐后血糖: 5.8,
          睡前血糖: 3.4,
          凌晨血糖: 1.2,
          type: '03-07'
        }
      ],
      DiaTypeData: [],
      sexData: [],
      ageData: [],
      DiaAgeData: [],
      MedTypeData: [
        {
          item: '口服药',
          count: 50
        },
        {
          item: '胰岛素',
          count: 20
        },
        {
          item: '未用药',
          count: 30
        }
      ],
      MacTypeData: [
        {
          item: '动态监测',
          count: 5
        },
        {
          item: '互联网血糖仪',
          count: 25
        },
        {
          item: '非互联网血糖仪',
          count: 70
        }
      ],
      valueTypeData: [],
      statnothing: 1
    }
  },
  created() {
    this.getInfo()
    this.getDynamicInfo()
    this.activeGroupId = 1
  },
  methods: {
    ...mapGetters(['doctorId']),
    getInfo() {
      this.loading = true
      getAction('/doctor/index/info', { doctorId: this.doctorId() })
        .then(res => {
          if (res.success) {
            console.log('res.result', res.result)
            if (res.result) {
              this.statnothing = 1
              res.result && (this.loginfo = res.result)
              this.sexData = res.result.sex
              this.DiaAgeData = res.result.sugarAge
              this.DiaTypeData = res.result.diabetesType
              this.ageData = res.result.age
              this.panes = res.result.panes
              this.barCheckData = res.result.barChartData
            } else {
              this.statnothing = 2
            }
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    getDynamicInfo() {
      this.loading = true
      getAction('/doctor/index/dynamic/info', { doctorId: this.doctorId() })
        .then(res => {
          if (res.success) {
            console.log('res.result1', res.result)
            if (res.result) {
              res.result.valueInfos && (this.patientdata = res.result.valueInfos)
              res.result.sugarStatus && (this.valueTypeData = res.result.sugarStatus)
              res.result && (this.dynamicInfo = res.result)
            }
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleChangeActiveGroupId(key) {
      this.activeGroupId = key
    },
    reload() {
      this.getInfo()
      this.getDynamicInfo()
    }
  }
}
</script>

<style scoped>
div {
  margin-bottom: 0px !important;
}
.ds_top {
  display: flex;
}

.ds_top_left {
  width: 55%;
}

.ds_top_right {
  width: 43%;
  margin-left: 2%;
}

.ds_title {
  font-weight: bold;
  font-size: 16px;
  margin-top: 1em;
}

.chart-card-contain {
  display: flex;
  align-items: flex-end;
  margin-top: 20px;
}

.chart-card-contain img {
  width: 28px;
}

.total {
  color: #000;
  font-size: 28px;
  margin-right: 5px;
  margin-left: 3px;
  line-height: 24px;
}

.chart-card-contain span:last-of-type {
  line-height: 18px;
}

.ds_card {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 0px 2px 2px rgb(0 0 0 / 1%), 0px 2px 2px 0px rgb(0 0 0 / 1%), 0px 0px 0px -4px rgb(0 0 0 / 2%);
  background: white;
  margin-top: 24px;
  padding: 20px;
}

.ds_card_subtitle {
  display: flex;
  align-items: center;
}

.ds_card_subtitle span:first-of-type {
  display: inline-block;
  width: 5px;
  height: 14px;
  border-radius: 5px;
  background: red;
  margin-right: 10px;
}
.ant-tag {
  border: none;
  background: none;
  font-size: 14px;
}
canvas {
  margin-left: -30px;
}
</style>

